<template>
  <div class="verification-page">
    <c-title :hide="false" text="核销明细"></c-title>
    <div class="flex-a-c search-sell">
      <div class="flex-a-c pb-20">
        <div class="search-sn">
          <van-search v-model="query.coupon_member_kwd" placeholder="姓名/手机号" custom-class="search-padding" @input="modelInput" use-left-icon-slot> </van-search>
        </div>
        <div class="search-name">
          <van-search v-model="query.order_sn" placeholder="订单编号" custom-class="search-padding" @input="modelInput" use-left-icon-slot>
            <div slot="left-icon"></div>
          </van-search>
        </div>
      </div>

      <div class="search-order">
        <van-search v-model="query.goods_name" placeholder="商品名称" custom-class="search-padding" @input="modelInput" use-left-icon-slot>
          <div slot="left-icon"></div>
        </van-search>
      </div>
      <div class="search-verifier">
        <van-search custom-class="verifier-pb" field-class="verifier-field" v-model="query.clerk_member_kwd" placeholder="核销员昵称/姓名" @input="modelInput" use-left-icon-slot>
          <div slot="left-icon"></div>
        </van-search>
      </div>
      <div class="search-btn flex-a-c flex-j-c" @click="onSearch">搜索</div>
    </div>
    <div class="verifier-time">
      <div class="title">选择核销时间</div>
      <div class="flex-a-c flex-j-sb start-time mb-10" @click="startTimeOn">
        <div>起始时间</div>
        <div class="flex-a-c">
          <span>{{ startDate }}</span>
          <div class="iconfont icon-advertise-next"></div>
        </div>
      </div>
      <div class="flex-a-c flex-j-sb start-time" @click="endTimeOn">
        <div>终止时间</div>
        <div class="flex-a-c">
          <span>{{ endDate }}</span>
          <div class="iconfont icon-advertise-next"></div>
        </div>
      </div>
    </div>

    <van-popup v-model="startShow" @close="onClose('start')" position="bottom">
      <van-datetime-picker
        title="选择年月"
        type="date"
        v-model="currentDate"
        :min-date="minDate"
        :formatter="formatter"
        @cancel="onClose('start')"
        @confirm="onConfirm(currentDate, 'start', $event)"
      />
    </van-popup>
    <van-popup v-model="endShow" @close="onClose('end')" position="bottom">
      <van-datetime-picker
        title="选择年月"
        type="date"
        v-model="terminateDate"
        :min-date="minDate"
        :formatter="formatter"
        @cancel="onClose('end')"
        @confirm="onConfirm(terminateDate, 'end', $event)"
      />
    </van-popup>

    <div class="verifier-list" v-if="examineList.length > 0">
      <block v-for="(item, index) in examineList" :key="index">
        <sell-orderItem :sellItem="item" :sellType="1">
          <div class="sell-info">
            <span>订单编号：{{ item.order_sn }}</span>
            <div class="name">{{ item.member && item.member.name }}（{{ item.member && item.member.mobile }}）</div>
            <span>消费券编号：{{ item.coupon_sn }}</span>
          </div>
        </sell-orderItem>
      </block>
    </div>
    <van-empty description="空空如也" v-else />
  </div>
</template>
<script>
import verificationDetails_controller from "./verificationDetails_controller.js";
export default verificationDetails_controller;
</script>
<style scoped>
.verification-page ::v-deep .van-search {
  padding: 0;
  border: 0.0313rem solid #dadada;
}
</style>
<style lang="scss" scoped>
.verification-page {
  margin: 0.625rem 0.625rem 0 0.625rem;

  .search-padding {
    padding: 0;
    border: 0.0313rem solid #dadada;
  }
}

.pb-20 {
  padding-bottom: 0.625rem;
}

.mb-10 {
  margin-bottom: 0.3125rem;
}

.search-sell {
  padding: 0.8125rem 0 0.875rem 0.8125rem;
  background-color: #fff;
  flex-wrap: wrap;
  flex-direction: row;

  .search-sn {
    width: 9.375rem;
    margin-right: 0.625rem;
  }

  .search-order,
  .search-verifier {
    width: 8.125rem;
    margin-right: 0.625rem;
  }

  .search-name {
    width: 10.625rem;
  }

  .search-btn {
    width: 3.125rem;
    height: 1.875rem;
    line-height: 1.875rem;
    text-align: center;
    background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
    font-size: 0.75rem;
    color: #fff;
    border-radius: 0.3125rem;
  }

  .van-search__content {
    background-color: #fff;
  }
}

.verifier-time {
  background-color: #fff;
  padding: 0.3125rem 0.75rem 0.625rem 0.8125rem;

  .title {
    font-size: 0.8125rem;
    color: #222;
    text-align: left;
  }

  .start-time {
    font-size: 0.75rem;
    color: #777;
  }
}

.verifier-list {
  margin-top: 0.625rem;

  .name {
    text-align: left;
  }
}

.order-item .sell-info {
  display: flex;
  flex-direction: column;
  padding: 0.9375rem 0 0.9375rem 0;
  position: relative;
  font-size: 0.75rem;
  color: #666;

  span {
    text-align: left;
  }

  .name {
    padding: 0.3125rem 0 0.3125rem 0;
  }
}

.sell-info::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2rpx;
  border-top: 2rpx solid #e9e9e9;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
</style>
